<script setup lang="ts">
  import { useFinishOrderForm } from './services'
  import { ref } from 'vue'
  import { FormInstance } from 'element-plus'

  const { form, submitLoading, reset, submit } = useFinishOrderForm()

  const formRef = ref<FormInstance | null>(null)

  defineExpose({
    submitLoading,
    submit: async (orderIds: Array<string>) => {
      if (!formRef.value) {
        return null
      }
      try {
        await formRef.value.validate()
        const res = await submit(orderIds)
        return res
      } catch (error) {
        return null
      }
    },
    reset: () => {
      if (!formRef.value) {
        return null
      }
      formRef.value.resetFields()
      reset()
    },
  })
</script>

<template>
  <el-form class="modal_form_content" :model="form" label-position="top" ref="formRef">
    <el-form-item label="结算方式" class="same_line">
      <el-radio-group v-model="form.settlementStatus">
        <el-radio :value="1" size="small">要结算费用</el-radio>
        <el-radio :value="2" size="small">无需结算费用</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item v-if="form.settlementStatus == 1">
      <span style="color: #999; font-size: 12px; line-height: 14px"
        >工单进入完成/取消状态，费用需要结算，将会产生费用结算单。</span
      >
    </el-form-item>
    <el-form-item v-else>
      <span style="color: #999; font-size: 12px; line-height: 14px"
        >工单进入完成/取消状态，费用不需要结算，不会产生费用结算单。</span
      >
    </el-form-item>
    <el-form-item label="处理备注">
      <el-input
        v-model.trim="form.remark"
        maxlength="200"
        placeholder="请输入处理备注"
        show-word-limit
        type="textarea"
        resize="both"
      />
    </el-form-item>
  </el-form>
</template>

<style scoped lang="scss">
  :deep(.el-textarea) {
    .el-textarea__inner {
      min-height: 75px !important;
      width: 100% !important;
      max-height: 140px !important;
      overflow: hidden;
    }
  }
</style>
